import { useEffect, useState } from "react";
import { getFileList } from "@/lib/api/fileController";
import type { FileInfo } from "@/lib/api/types";
import { FileIcon } from "./FileIcon";
import clsx from "clsx";


type IconFilePlanProps = {
  direct_path: string;
};

export default function IconFilePlan({ direct_path }: IconFilePlanProps) {
  const [files, setFiles] = useState<FileInfo[]>([]);

  useEffect(() => {
    getFileList({ dir: direct_path }).then(res => {
      setFiles(res.fileList);
    }).catch(console.error);
  }, [])

  return <>
    {/* TODO: 
        调整大小
        布局
    */}
    <div className="flex justify-start flex-wrap">
      {
        files.map((file, index) => {
          return <div key={index} className={clsx(
            "flex",
            "flex-col",
            "items-center",
            "ml-2.5",
            "w-20",
            "mb-2.5",
            "border-1",
            "border-transparent",
            "p-1.5",
            "hover:border-1",
            "hover:border-red-300",
          )}>
            <FileIcon is_dir={file.isDir} />
            <div>{file.name}</div>
          </div>
        })
      }
    </div >
  </>
}
